<template>
  <div>
    <div class="login-container">
      <div class="demonstration">默认使用element ui封装属性进行转化</div>
        <div class="block">
        
        <el-date-picker
          v-model="geyao"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="handleClick">获取日期</el-button>
    </div>
    <div class="login-container">
      <div class="demonstration">使用dayjs进行日期转化</div>
        <div class="block">
        <el-date-picker
          v-model="geyaoday"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="handleClickDay">获取日期</el-button>
    </div>
    <div class="login-container">
      <div class="demonstration">使用moment进行日期转化</div>
        <div class="block">
        <el-date-picker
          v-model="geyaomoment"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="handleClickMoment">获取日期</el-button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import moment from 'moment'
export default {
  data() {
    return {
      geyao: '',
      geyaoday:'',
      geyaomoment:''
    }
  },
  methods: {
    handleClick() {
    console.log(this.geyao,"日期")
    }
    ,
    handleClickDay(){
      console.log(this.geyaoday,"处理前")
      console.log(dayjs(new Date(this.geyaoday)).format('YYYY-MM-DD HH:mm:ss'),"处理后")
    }
    ,
    handleClickMoment(){
      console.log(this.geyaomoment,"处理前")
      console.log(moment(this.geyaomoment).format('YYYY-MM-DD HH:mm:ss'),"处理后")
    }
  }
}
</script>